<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML5 canvas实现绘图的redo和undo功能|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="__HCSS__default.css">
	<script src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="__HJS__canvasdraw.js"></script>
    <style type="text/css">
		select{color: #333;}
		.htmleaf-icon{color: #fff;}
    </style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body onload="InitThis();">
	<div class="htmleaf-container">
		<div class="htmleaf-content bgcolor-3">
			<div align="center">

				<button class="btn btn-danger" onclick="javascript:cUndo();return false;">后退一步</button>
				<button class="btn btn-primary" onclick="javascript:cRedo();return false;">前进一步</button>
				<span style="font-size: 14px;">线条宽度 : </span>
		        <select id="selWidth">
		            <option value="1">1</option>
		            <option value="3"  selected="selected">3</option>
		            <option value="5">5</option>
		            <option value="7">7</option>
		            <option value="9" >9</option>
		            <option value="11">11</option>
		        </select>
				<span style="font-size: 14px;">Color : </span>
		        <select id="selColor">
		            <option value="black">黑色</option>
		            <option value="blue">蓝色</option>
		            <option value="red"  selected="selected">红色</option>
		            <option value="green">绿色</option>
		            <option value="yellow">黄色</option>
		            <option value="gray">灰色</option>
		        </select>

				<button class="btn btn-primary" onclick="javascript:drawImage();return false;">清除笔画</button>
				<button id="btn_submit" class="btn btn-warning">保存图片</button>
				<br/>
				<br/>
				<canvas id="myCanvas" width="1000" height="500" style="border:2px solid gray;cursor:pointer;" ></canvas>
		    </div>
			<div>
				<button class="btn btn-danger" onclick="javascript:window.history.go(-1);">取消</button>
				<button class="btn btn-success" onclick="javascript:window.history.go(-1);">确定</button>
			</div>
		</div>
	</div>

	<script language="javascript">
		var submit = document.getElementById("btn_submit");
		submit.addEventListener("click", function(){
			$("#qmimg").attr("src",document.getElementById('myCanvas').toDataURL("image/png"));

		});
	</script>
	<img id="qmimg" style="display:block;"/>
</body>
</html>